<template>
	<view>
		<view class="bgView">
			<view class="title">
				基本信息
			</view>
			<view class="flex-row-flex-start">
				<view class="leftTitle">持卡人：</view>
				<input v-model="info.name"  class="input" type="text" placeholder="请填写持卡人姓名" />
			</view>
			<view class="flex-row-flex-start">
				<view class="leftTitle">身份证号：</view>
				<input v-model="info.id_number" class="input" type="text" placeholder="请填写身份证号" />
			</view>
			<view class="flex-row-flex-start">
				<view class="leftTitle">银行卡号：</view>
				<input v-model="info.bank_number" class="input" type="text" placeholder="请填写银行卡号" />
			</view>
			<view class="flex-row-flex-start">
				<view class="leftTitle">开户行：</view>
				<input v-model="info.opening_bank" class="input" type="text" placeholder="请填写开户行" />
			</view>
			<view class="flex-row-flex-start">
				<view class="leftTitle">手机号：</view>
				<input v-model="info.mobile" class="input" type="text" placeholder="请填写预留手机号" />
			</view>
			<view class="flex-row-space-between">
				<view class="flex-row-flex-start">
					<view class="leftTitle">验证码：</view>
					<input v-model="info.captcha" class="input" type="text" placeholder="请填写验证码" />
				</view>
				<view @click="codeClick()" class="codeButton flex-row-center">
						{{clockText}}
				</view>
			</view>
			<view class="leftTitle"> 微信二维码</view>
			
			<view @click="upload()" class="">
			
					<image mode="scaleToFill" class="uploadImage1"
						:src="info.wechat || require('@/static/my/upload.png')" />
			
			</view>
			<view class="flex-row-flex-start">
				<view class="leftTitle">支付宝账号：</view>
				<input v-model="info.alipay_mobile" class="input" type="text" placeholder="请填写支付宝账号" />
			</view>
			<view class="leftTitle" style="width: 180rpx;"> 支付宝二维码</view>
			<view @click="upload1()" class="">
			
					<image mode="scaleToFill" class="uploadImage1"
						:src="info.alipay || require('@/static/my/upload.png')" />
			
			</view>
		</view>
		<view @click='bottomButtonClick()' class="fixed-bottom footer">
			<view  class="bottomButton flex-column-center">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import {
			chooseImage,
			chooseImage1
		} from "@/utils";
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		add_bank,
		smsSend
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				clockText: '验证码',
				info:{
					wechat:'',
					alipay_mobile:'',
					alipay:'',
					mobile:'',
					captcha:'',
					name:'',
					id_number:'',
					bank_number:'',
					opening_bank:'',
				},
				list:[],
				data:{}

			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),
		},
		onShow() {
	
		},
		onLoad(e) {
			// this.loadData()
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 20) {
			// 	this.backgroundColor = "#FBF9FF"
			// } else {
			// 	this.backgroundColor = "#ffffff00"
			// }
		},
		methods: {
			upload() {
				chooseImage((img) => {
					this.info.wechat = img
			
				});
			},
			upload1() {
				chooseImage((img) => {
					this.info.alipay = img
					
				});
			},
			
			codeClick() {
				if (this.clockText != '验证码') {
					return
				}
				if(!this.info.mobile.length){
					this.showToast('请输入手机号')
					return
				}
			
			
				smsSend({
						mobile: this.info.mobile,
						event: 'bank',
					})
					.then(res => {
						this.showToast(res.msg)
						this.daojishi()
					})
					.catch(err => {
			
					})
			
			},
			daojishi() {
				this.clock = 60;
				let timer = setInterval(() => {
					this.clock--;
					this.clockText = `${this.clock} 秒`
			
					if (this.clock < 1) {
						clearInterval(timer);
						this.clockText = '验证码'
						this.clock = 0
					}
				}, 1000)
			},
			bottomButtonClick () {
			
				var data = {
			
				}
				add_bank(this.info).then(res => {
					this.showToast(res.msg)
					if(res.code==1){
						uni.$emit("isRefresh",1);
						setTimeout(() => {
								uni.navigateBack()
							}, 1500)
					
						}
				})
			},
			
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
.bgView{
	padding: 28rpx;
	padding-bottom: 10rpx;
	margin: 30rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #16171B;
		margin-bottom: 20rpx;
	}
	.leftTitle{
		width: 180rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #16171B;
	}
	.input{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #16171B;
	}
	.codeButton{
		padding: 0rpx 20rpx;
		height: 52rpx;
		background: linear-gradient( 90deg, #2366E6 0%, #4373F6 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.uploadImage1{
		margin-top: 30rpx;
		width: 260*0.9rpx;
		height: 260*0.9rpx;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
	}
</style>